<script setup>
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import icon_house from '@/assets/imgs/bt_sy.png'
import {
  getHouseOldComnunity,
  getHouseRemodelCircumstance
} from '../api.js'
import DotsTabs from '@/views/new-screen/components/dotsTabs.vue'

const props = defineProps({
  isExpanded: Boolean,
  activeName: String,
})

const oldQuarterChartBarRef = ref(null)

const getBarChartOption = (data) => {
  return {
    grid: {
      top: '20%',
      left: '4%',
      bottom: '13%',
      right: '4%',
    },
    legend: {
      show: false,
      right: 'center',
      itemWidth: 6,
      itemHeight: 6,
      // width: '100%',
      textStyle: {
        color: '#b4d3ed',
        fontSize: 12,
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      data: data.xAxis,
      axisLabel: {
        showMaxLabel: true,
        textStyle: {
          color: '#ffffff',
          fontSize: 9,
        },
        rotate: -45,
        padding: [3, 0, 0, 0],
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: 'rgb(64,77,93)',
          width: 1,
        },
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: 'rgb(64,77,93)',
        },
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        show: false,
        name: '任务数',
        type: 'value',
        position: 'left',
        axisLabel: {
          show: false,
          formatter: '{value}',
          textStyle: {
            color: '#b4d3ed',
            fontSize: 12,
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#b4d3ed',
            width: 1,
          },
        },
        splitLine: {
          show: true,
        },
      },
    ],
    series: [
      {
        name: '任务数',
        type: 'bar',
        barWidth: 10,
        showBackground: false,
        label: {
          // 数据标签配置
          show: true, // 显示标签
          color: '#fff',
          position: 'outside', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        yAxisIndex: 0,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#D9D8FF' // 0% 处的颜色
            }, {
                offset: 1, color: '#8184FF' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
        data: data['任务数'],
      },
    ],
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c89' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c21' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }
  }
}
const updateChartBar = (res) => {
  console.log('res', res)
  const data  = {
        "xAxis": [
            "柏梓镇",
            "宝龙镇",
            "别口镇",
            "崇龛镇",
            "古溪镇",
            "花岩镇",
            "龙形镇",
            "米心镇",
            "双江镇",
            "寿桥镇",
            "太安镇",
            "塘坝镇",
            "卧佛镇",
            "五桂镇",
            "小渡镇",
            "新胜镇",
            "玉溪镇",
            "上和镇",
            "群力镇",
            "田家镇"
        ],
        "任务数": [
          28,
          7,
          25,
          66,
          89,
          3,
          3,
          98,
          89,
          86,
          16,
          7,
          8,
          9,
          3,
          2,
          34,
          37,
          97,
          42
        ],
    }
  oldQuarterChartBarRef.value?.updateOption(getBarChartOption(data))
}

const oldQuarterOverviewData = ref([
  {
    name: '老旧小区总数',
    value: 28,
    unit: '个'
  },
  {
    name: '老旧小区面积',
    value: 28,
    unit: '万平'
  },
])

const updateOverviewData = (data) => {
  Object.entries(data).forEach(([name, value]) => {
    const one = oldQuarterOverviewData.value.find((item) => item.name === name)
    if (one) { 
      one.value = value
    }
  })
}

const tableData = ref([])
const updateTableData = (res) => {
  console.log('res: ', res)
  tableData.value = res.List
}

const reqOldCommnunityData = () => {
  getHouseOldComnunity({ type: tabActiveName.value })
    .then(res => {
      updateOverviewData(res.data)
      if (tabActiveName.value === '图表') {
        updateChartBar(res.data)
      } else {
        updateTableData(res.data)
      }
    })
}

const tabActiveName = ref('图表')
const tabList = ref([
  { name: '图表' },
  { name: '详情列表' },
])
const onChangeTab = (activeName) => {
  tabActiveName.value = activeName
  reqOldCommnunityData()
}


const getChartPieOption = ({ list, image }) => {
  const total = list.reduce((a, b) => a + b.value, 0)
  return {
    tooltip: {
      trigger: 'item',
      formatter: '{b} <br/> {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      top: 'middle',
      left: '65%',
      data: list.map(item => item.name),
      itemWidth: 10,
      itemHeight: 10,
      icon: 'circle',
      itemGap: 10,
      textStyle: {
        color: '#fff',
        fontSize: 12
      },
      formatter: (name) => {
        const value = list.find(item => item.name === name).value
        const per = parseFloat((value / total * 100).toFixed(2))
        return name + '  ' + value + '  ' + per + '%'
      }
    },
    series: [
      {
        name: '分类',
        type: 'pie',
        radius: ['42%', '56%'],
        center: ['33%', '50%'],
        padAngle: 3, // 轻微的角度间隙
        labelLine: {
          length: 1
        },
        inverse: true,
        label: {
          formatter: '{b|{b}}\n{hr|}\n{per|{d}%}  ',
          rich: {
            b: {
              color: '#ffffff',
              fontSize: 14,
            },
            hr: {
              borderColor: '#8C8D8E',
              width: '100%',
              borderWidth: 1,
              height: 0
            },
            c: {
              color: '#ffffff',
              fontSize: 14,
              lineHeight: 28
            },
            unit: {
              color: '#ccc',
              fontWeight: 'normal',
            },
            per: {
              color: '#ffffff',
              lineHeight: 28
              // backgroundColor: '#4C5058',
              // padding: [3, 4],
              // borderRadius: 4
            }
          }
        },
        data: list,
      }
    ],
    // 添加 graphic 组件显示图片
    graphic: {
      elements: [{
        type: 'image',
        key: 'centerImage',
        z: 100,
        style: {
          image: image, // 你的图片路径
          width: 110,
          height: 110
        },
        left: '20%',
        top: 'center'
      }]
    },
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c89' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c21' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
  }
}
const rebuildChartPieRef = ref(null)
const updateChartRebuild = (list = []) => {
  rebuildChartPieRef.value?.updateOption(getChartPieOption({ list: list.map(e => ({
    name: e.type,
    value: e.count,
  })), image: icon_house }))
}

const rebuildData = ref({
  '共计': 0,
  '项目前期': 0,
  '正在改造': 0,
  '改造完成': 0,
})
const updateRemodelOverview = (list = []) => {
  list.forEach((e) => {
    rebuildData.value[e.type] = e.count
  })
  rebuildData.value['共计'] = list.reduce((pre, cur) => pre + cur.count, 0)
}
const reqData = () => {
  onChangeTab('图表')
  getHouseRemodelCircumstance()
    .then((res) => {
    if (res.success) {
      updateRemodelOverview(res.data?.list)
      updateChartRebuild(res.data?.charts)
    }
  })
}

onMounted(() => {
  reqData()
})
</script>

<template>
  <div :class="['left', isExpanded ? 'active' : '']">
    <card name="老旧小区" class="total-card">
      <div class="section">
        <div class="section-title">＞ 小区统计</div>
        <div class="overview-wrap">
          <div class="overview-box" v-for="item in oldQuarterOverviewData" :key="item.name">
            <div class="bg"></div>
            <div class="overview-value">{{ item.value }}
              <span class="overview-unit">{{ item.unit }}</span>
            </div>
            <div class="overview-name">{{ item.name }}</div>
          </div>
        </div>
        <DotsTabs :tab-list="tabList" v-model:activeName="tabActiveName" @change="onChangeTab" />
        <div class="chart" v-show="tabActiveName === '图表'">
          <draw-echarts
            ref="oldQuarterChartBarRef"
            width="420"
            height="340"
            :options="{}"
          ></draw-echarts>
        </div>
        <div class="table-wrap" v-show="tabActiveName === '详情列表'">
          <el-scrollbar style="height: 340px;">
            <div class="tr th">
              <div class="td">区县</div>
              <div class="td">数量</div>
              <div class="td">案例</div>
              <div class="td">描述</div>
              <div class="td">百分比</div>
            </div>
            <div class="tr" v-for="(item, index) in tableData" :key="index">
              <div class="td">
                <el-tooltip :content="item.town"  placement="top" effect="light">
                  {{ item.town }}
                </el-tooltip>
              </div>
              <div class="td">
                <el-tooltip :content="item.count + ''"  placement="top" effect="light">
                  {{ item.count }}
                </el-tooltip>
              </div>
              <div class="time td">
                <el-tooltip :content="item.examples.join(',')"  placement="top" effect="light">
                  {{ item.examples.join(',') }}
                </el-tooltip>
              </div>
              <div class="time td">
                <el-tooltip :content="item.logic"  placement="top" effect="light">
                  {{ item.logic }}
                </el-tooltip>
              </div>
              <div class="time td">
                <el-tooltip :content="item.percentage"  placement="top" effect="light">
                  {{ item.percentage }}
                </el-tooltip>
              </div>
            </div>
            <div class="no-data" v-if="!tableData.length">暂无数据</div>
          </el-scrollbar>
        </div>

      </div>

      <div class="section">
        <div class="section-title">＞ 改造情况</div>
        <div class="rebuild-total-wrap">
          <span>共计</span>
          <span class="value">
            {{ rebuildData['共计'] }}
            <span class="unit">个</span>
          </span>
        </div>
        <div class="chart">
          <draw-echarts
            ref="rebuildChartPieRef"
            width="420"
            height="180"
            :options="{}"
          ></draw-echarts>
        </div>
        <div class="refuild-overview-wrap">
          <div class="item">
            <div class="value">{{ rebuildData['项目前期'] }}</div>
            <div class="title">项目前期</div>
          </div>
          <div class="divider"></div>
          <div class="item">
            <div class="value">{{ rebuildData['正在改造'] }}</div>
            <div class="title">正在改造</div>
          </div>
          <div class="divider"></div>
          <div class="item">
            <div class="value">{{ rebuildData['改造完成'] }}</div>
            <div class="title">改造完成</div>
          </div>
        </div>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.left {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .total-card {
    height: 410px;
    margin-bottom: var(--card-margin-bottom);

    .section-title {
      line-height: 30px;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 10px;
    }
    .section:not(:first-child) .section-title {
      margin-top: 12px;
    }

    .overview-wrap {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 10px;

      .overview-box {
        position: relative;
        margin-bottom: 5px;
        padding-left: 16px;
        width: 43%;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: left;
        flex-direction: column;
        gap: 5px;
      
        text-align: left;
        color: #eee;

        .bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(to right, #044e79 0%, #063254 50%, #081a3421 100%);
          border: solid 1px;
          border-image: linear-gradient(90deg, #00EDF4, #08173121) 1;
          border-right: none;
          transform: skewX(-18deg);
        }
        .overview-name {
          position: relative;
        }
        .overview-value {
          position: relative;
          font-size: 20px;
          font-weight: bold;
          color: #fff;
        }
        .overview-unit {
          color: #bbdbf6;
          font-size: 14px;
          font-weight: normal;
        }
      }
    }

    .rebuild-total-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      padding-left: 20px;
      padding-right: 6px;
      color: #B9D9F4;
      background: linear-gradient(to right, #1F3157, #1F315700);
      .value {
        font-weight: bold;
        font-size: 20px;
        color: #00C2FF;
        .unit {
          font-size: 14px;
          font-weight: normal;
          color: #bbdbf6;
          margin-left: 4px;
        }
      }
    }

    .refuild-overview-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #B9D9F4;
      padding: 20px 10px;
      background: linear-gradient(#05477100 0%, #054771 100%);
      border: solid 2px;
      border-image: linear-gradient(#01D3DB00 0%, #01D3DB 100%) 1;
      border-top: none;
      
      .item {
        flex: 1;

        text-align: center;
        .value {
          color: #fff;
          font-weight: bold;
          font-size: 20px;
        }
      }

      .divider {
        width: 2px;
        height: 40px;
        background: #19486A;
      }
    }
  }

  .table-wrap {
    color: #ffffff;
    
    .tr {
      display: flex;
      height: 32px;
      line-height: 32px;
      .td {
        flex: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        word-break: break-all;
        padding: 0 4px;
      }
      .name {
        flex: 7;
      }
    }
    .th {
      color: #bbdbf6;
    }
    .tr:nth-child(odd) {
      background-color: #1c2d4c;
    }
    .tr:nth-child(even) {
      background-color: #08142d;
    }

    
    .no-data {
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 3;
      color: #B9D9F4;
    }
  }

  .my-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbdbf6;
    height: 32px;
    line-height: 32px;
    margin-bottom: 10px;

    .dots {
      display: flex;
      align-items: center;
      gap: 5px;
      i {
        display: inline-block;
        width: 3px;
        height: 3px;
        border-radius: 3px;
        background: #bbdbf6;
      }
    }

    .tabs {
      display: flex;
    }

    .tab-item {
      position: relative;
      cursor: pointer;
      padding: 0 6px;
      margin: 0 6px;
      font-size: 13px;
    }
    .tab-item::before {
      content: '';
      position: absolute;
      width: 2px;
      height: 0.7em;
      right: -7px;
      top: 12px;
      background-color: #ffffff;
    }
    .tab-item:last-child::before {
      display: none;
    }
    .tab-item.on {
      color: #f8ea9a;
    }
    .tab-item.on::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,rgba(248, 234, 154, 0.01), rgba(248, 234, 154, 0.4), rgba(248, 234, 154, 0.01));
    }
  }
}
</style>
